<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-02-22 10:50:04
 * @LastEditTime: 2022-04-18 16:11:12
 * @LastEditors: zhangwei 1405298045@qq.com
 * @Description: 

 * @FilePath: /ll-fe-mp-dyfx/src/productOrderPage/components/OrderTab.vue
 *  
-->
<template>
	<view class="tab" :style="[mainStyle]">
		<view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
			<view :class="item.select ? 'tab-item-name-select' : 'tab-item-name'">{{ item.name }}</view>
			<view class="tab-item-num" v-if="item.num > 0 && item.showNum">
				<view class="tab-item-num-base">
					{{ item.num > 99 ? '99+' : item.num }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'OrderTab',

	props: {
		tabList: {
			default: []
		}
	},

	computed: {
		mainStyle() {
			const { tabList } = this;

			const style = `20rpx ${tabList.length === 3 ? 48 : 24}rpx`;
			console.log('🚀 ~ file: OrderTab.vue ~ line 39 ~ mainStyle ~ style', style);

			return {
				padding: style
			};
		}
	},

	methods: {
		changeTab(index) {
			this.$emit('changeTab', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab {
	width: 750rpx;
	height: 96rpx;
	background: #ffffff;
	display: flex;
	justify-content: space-between;

	&-item {
		display: flex;
		&-name-select {
			font-size: 28rpx;
			font-weight: 600;
			color: #ffffff;
			padding: 8rpx 24rpx;
			background: linear-gradient(135deg, #5359ff 0%, #8266ff 100%);
			border-radius: 16rpx;
			height: 56rpx;
			line-height: 40rpx;
		}
		&-name {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			padding: 8rpx 24rpx;
			height: 56rpx;
		}
		&-num {
			position: relative;
			width: 0;
			&-base {
				top: -10rpx;
				left: -26rpx;
				position: absolute;
				padding: 0 4rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 24rpx;
				height: 28rpx;
				border-radius: 14rpx;
				min-width: 28rpx;
				border: 2rpx solid #ffffff;
				background: linear-gradient(135deg, #5359ff 0%, #8266ff 70%);
			}
		}
	}
}
</style>
